<template>
	<div class="videos-box">
		<div class="title anim" style="--delay: .3s">相关话题</div>
		<div v-for="item in cards" :key="item.id" class="card anim" style="--delay: .5s">
			<img :src="item.img" :alt="item.name" class="img">
			<div class="content">
				<div class="name">{{item.name}}</div>
				<div class="by">{{item.by}}</div>
				<div class="info">
					{{item.info1}}<span class="seperate"></span>{{item.info2}}
				</div>
			</div>
		</div>
		<div class="button anim" style="--delay: .6s">查看更多</div>
	</div>
</template>

<script>
export default {
	name: 'ChatVipComponent',
	data() {
		return {
			//相关话题数据
			cards: [
				{
					id: 0,
					img: 'http://image.wufazhuce.com/FjB5Nj2tXGO5SOtBnUwq0GFQqQ7z#pskt#&imgName=%u9996%u9875%u56FE&imgLink=http%3A%2F%2Fm.wufazhuce.com%2Fone%2F3677', //图片
					name: '未来像盛夏的大雨，在我们还不及撑开伞时就扑面而来。', //名称
					by: 'Benjamin Davies', //作者
					info1: '329 浏览', //浏览次数
					info2: '1 小时前', //发布时间
				},
				{id:1,img:'http://image.wufazhuce.com/FuLThNJCQOvKb-_z_VrBrW3RHQAG#pskt#&imgName=%u9996%u9875%u56FE&imgLink=http%3A%2F%2Fm.wufazhuce.com%2Fone%2F3671',name:'一场为期6个月的平静实验',by:'老杨的猫头鹰',info1:'9k 浏览',info2:'3 天前'},
			],
		}
	},
}
</script>

<style scoped lang="scss">
.videos-box {
	.title {
		color: white;
		font-size: 18px;
		margin-top: 30px;
	}
	.card {
		margin-top: 26px;
		display: flex;
		align-items: center;
		.img {
			width: 100px;
			height: 80px;
			margin-right: 16px;
			border-radius: 10px;
			object-fit: cover;
			object-position: right;
			transition: .3s;
			&:hover {
				transform: scale(1.02);
			}
		}
		.content {
			max-width: 20ch;
			.name {
				color: white;
				line-height: 1.3em;
				font-size: 14px;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
			.by {
				color: var(--body-color);
				font-size: 13px;
				margin: 6px 0;
			}
			.info {
				color: var(--body-color);
				font-size: 13px;
				.seperate {
					display: inline-block;
					width: 3px;
					height: 3px;
					background-color: white;
					border-radius: 50%;
					margin: 0 6px;
					vertical-align: middle;
				}
			}
		}
	}
	.button {
		background-color: #6c5ecf;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 10px;
		border-radius: 10px;
		border: 0;
		color: white;
		font-size: 13px;
		margin-top: 26px;
		cursor: pointer;
		transition: .3s;
		&:hover {
			background-color: #5847d0;
		}
	}
}
</style>